<style scoped>
	.layout {
		border: 1px solid #d7dde4;
		background: #f5f7f9;
		position: relative;
		border-radius: 4px;
		overflow: hidden;
	}
	
	.layout-content {
		height: 700px;
		margin: 15px;
		overflow: hidden;
		background: #fff;
		border-radius: 4px;
		overflow: scroll;
	}
	
	.layout-menu-left {
		background: #cccccc;
		padding: 10px;
	}
	
	.layout-header {
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
	}
	
	.left-layout-content {
		height: 650px;
		background: #fff;
		box-shadow: 0 1px 1px rgba(0, 0, 0, .1);
		padding: 10px;
	}
	
	.left-layout-content p {
		text-indent: 2em;
		
	}
	
	h2 {
		text-align: center;

		text-indent: 2em;
	}
</style>
<template>
	<div class="layout" :class="{'layout-hide-text': spanLeft < 5}">
		<Row type="flex">
			<Col :span="spanLeft" class="layout-menu-left">
			<br>
			<div class="layout-header">
				<br>
				<h2>{{newsTitle}}</h2>
			</div>
			<div class="left-layout-content">
				<p>{{newsContent}}</p>
			</div>
			</Col>
			<Col :span="spanRight">
			<div class="layout-content">
				<Table border :columns="columns7" :data="comnet.list"></Table>
			</div>
			</Col>
		</Row>
		<Modal v-model="modal6" title="查看评论">
			<Form :model="formLeft" label-position="left" :label-width="100">
				<FormItem label="姓名">
					<Input v-model="formLeft.name" disabled style="color: black;"></Input>
				</FormItem>
				<FormItem label="内容" >
					<Input v-model="formLeft.content" type="textarea" disabled></Input>
				</FormItem>
			</Form>
		</Modal>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				newsTitle: '',
				newsContent: '',
				newsComent: '',
				spanLeft: 8,
				spanRight: 16,
				modal6: false,
				formLeft: {
					name: '',
					content:''
				},
				columns7: [{
						title: '姓名',
						key: 'name',
						render: (h, params) => {
							return h('div', [
								h('Icon', {
									props: {
										type: 'person'
									}
								}),
								h('strong', params.row.name)
							]);
						}
					},
					{
						title: '内容',
						key: 'content'
					},
					{
						title: '时间',
						key: 'date'
					},
					{
						title: '操作',
						key: 'action',
						width: 150,
						align: 'center',
						render: (h, params) => {
							return h('div', [
								h('Button', {
									props: {
										type: 'primary',
										size: 'small'
									},
									style: {
										marginRight: '5px'
									},
									on: {
										click: () => {
											this.show(params.index)
										}
									}
								}, '查看'),
								h('Button', {
									props: {
										type: 'error',
										size: 'small'
									},
									on: {
										click: () => {
											this.remove(params.index)
										}
									}
								}, '删除')
							]);
						}
					}
				],
				comnet: {
					list: []
				}
			}
		},
		methods: {
			toggleClick() {
				if(this.spanLeft === 5) {
					this.spanLeft = 2;
					this.spanRight = 22;
				} else {
					this.spanLeft = 5;
					this.spanRight = 19;
				}
			},
			show(index) {
			Object.assign(this.$data.formLeft, this.comnet.list[index])
			this.modal6 = true
			},
			remove(index) {
				this.$Modal.confirm({
					title: '确认删除数据吗',
					content: '删除后这些数据将无法找回',
					loading: true,
					onOk: () => {
						setTimeout(() => {
							this.$http.delete('http://localhost:3000/commit/data/' + this.comnet.list[index]._id)
								.then(res => {
									this.comnet.list = []
									this.getData()
								})
							this.$Modal.remove();
						}, 1000);
					}
				});
			},
			getData() {
				this.$http.get('http://localhost:3000/commit/data').then(res => {
					console.log(res)
					var ll = res.data.length
					for(let i = 0; i < ll; i++) {
						if(res.data[i].cateId == this.newsComent._id) {
							this.comnet.list.push(res.data[i])
						}
					}
				})
				this.$http.get('http://localhost:3000/news/data/' + this.newsComent._id).then(res => {
					console.log(res)
					this.newsTitle = res.data.title,
						this.newsContent = res.data.content
				})
			}

		},
		created() {
			this.newsComent = this.$route.query
			this.getData()
		}
	}
</script>